<template>
  <view class="content">
    <view class="inpItem">
      <view class="inpItemLet">条形编码</view>

      <view class="inpItemRig">
        <input v-model="goods_no" placeholder="直接扫描/点击此处输入商品条码" />
      </view>
    </view>
    <view class="ts"
      >* 需在PC端进销存管理奖对应的产品加入到库存管理中才能扫码入库</view
    >

    <view class="submit">
      <!-- #ifndef WEB -->
      <view class="m-btn" @click="scan">
        <i class="iconfont icon-scanning"></i>
        扫一扫产品条码入库
      </view>
      <!-- #endif -->
      <view class="m-btn" @click="submit"> 入库 </view>
    </view>

    <transitionPage></transitionPage>
  </view>
</template>

<script>
export default {
  data() {
    return {
      goods_no: ""
    };
  },

  methods: {
    scan() {
      this.$u.throttle(() => {
        uni.scanCode({
          onlyFromCamera: true,
          success: (res) => {
            if (res.errMsg == "scanCode:ok") {
              let { result } = res;
              // this.goods_no = result;
              this.$utils.toUrl(`/goods/erpScan/list/index?goods_no=${result}`);
            }
          }
        });
      }, 500);
    },
    submit() {
      this.$u.throttle(async () => {
        let { goods_no } = this;
        if (!this.goods_no) {
          this.$utils.toast("请填写商品条码！");
          return;
        }

        this.$utils.toUrl(`/goods/erpScan/list/index?goods_no=${goods_no}`);
      }, 500);
    }
  }
};
</script>

<style lang="scss" scoped>
.content {
  padding: 24rpx;
  min-height: 100vh;
  background: #f2f2f2;
}

.inpItem {
  display: flex;
  align-items: center;
  padding: 0 24rpx;
  background: #fff;
  border-radius: 20rpx;

  .inpItemLet {
    margin-right: 60rpx;
  }

  .inpItemRig {
    flex: 1;
    overflow: hidden;
  }
}

input {
  font-size: 30rpx;
  color: #333;
  width: 100%;
}

input,
picker {
  width: 100%;
  height: 80rpx;
  font-size: 24rpx;
  color: #333;
}

.submit {
  padding-top: 60rpx;
}

.m-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 40rpx;
  height: 80rpx;
  background: #f0250e;
  border-radius: 32px;
  color: #fff;
  font-size: 32rpx;
  font-weight: bold;

  .iconfont {
    margin-right: 14rpx;
    font-size: 40rpx;
  }
}

.ts {
  padding: 10rpx 0 0;
  font-size: 28rpx;
  color: #a6a6a6;
}
</style>
